<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>maven tools</title>
<script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" />
<style type="text/css">
.x-admin-backlog .x-admin-backlog-body {
    display: block;
    padding: 10px 15px;
    background-color: #f8f8f8;
    color: #999;
    border-radius: 2px;
    transition: all .3s;
    -webkit-transition: all .3s
}

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
    width: calc(100vw + 18px);
    overflow: auto;
}
</style>
</head>
<body>
<div class="layui-main site-inline">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>maven tools</legend>
	</fieldset>
	
	<blockquote class="layui-elem-quote">maven&nbsp;安装本地&nbsp;jar&nbsp;到仓库命令生成工具</blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>maven info</legend>
    </fieldset>
    
    <form class="layui-form" action="">
      <div class="layui-form-item">
	    <label class="layui-form-label">jar 路径</label>
	    <div class="layui-input-block">
	      <input type="text" id="jarFilePath" autocomplete="off" placeholder="请输入 jar 文件绝对路径" class="layui-input">
	    </div>
	  </div>
    </form>
    
	<div class="layui-tab">
		<ul class="layui-tab-title">
			<li class="layui-this">jar</li>
			<li>xml</li>
		</ul>
		<div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
                <div class="layui-upload">
				  <button type="button" class="layui-btn layui-btn-normal" id="selectJarFile">选择&nbsp;jar&nbsp;文件</button>
				  <button type="button" class="layui-btn" id="uploadBtn" style="display:none;">upload</button>
				  <button type="button" class="layui-btn" id="uploadBtnParent">开始上传</button>
				</div>
            </div>
			<div class="layui-tab-item">
				<form class="layui-form" lay-filter="formFilter-xml" action="">
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">maven</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入maven坐标信息，可在maven仓库中获取：https://mvnrepository.com/" name="mavenInfo" lay-verify="required" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitFilter">生成</button>
							<button type="button" class="layui-btn layui-btn-primary" id="resetBtnId">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>generate maven cmd</legend>
	</fieldset>
	
	<div class="layui-form-item">
	    <div class="layui-inline">
	        <label class="layui-form-label">maven info</label>
        </div>
		<div class="layui-inline">
	        <label class="layui-form-label">groupId</label>
	        <div class="layui-form-mid layui-word-aux" id="groupId-id"></div>
		</div>
		<div class="layui-inline">
	        <label class="layui-form-label">artifactId</label>
	        <div class="layui-form-mid layui-word-aux" id="artifactId-id" ></div>
	    </div>
	    <div class="layui-inline">
	        <label class="layui-form-label">version</label>
	        <div class="layui-form-mid layui-word-aux" id="version-id"></div>
	    </div>
    </div>
    
	<div class="layui-form-item">
         <label class="layui-form-label">command</label>
         <div class="layui-input-block">
             <textarea class="layui-textarea" rows="3" id="mavenCommandId" readonly="readonly"></textarea>
         </div>
    </div>
    
    <blockquote class="layui-elem-quote">
        <p>© 2020 <a href="https://woodwhales.cn/" target="_blank">woodwhales's blog</a>&nbsp;木鲸鱼</p>
    </blockquote>
    
</div>
     
<script>
	layui.use(['form', 'layedit', 'element', 'upload'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  ,upload = layui.upload
	  ,element = layui.element;
	  
	//选完文件后不自动上传
	upload.render({
	  elem: '#selectJarFile'
	  ,url: './upload'
	  ,auto: false
	  ,multiple: false
	  ,before: function(obj){
		  this.data = {"jarFilePath" : $('#jarFilePath').val().trim()}
	  }
	  ,accept: 'file'
	  ,exts: 'jar'
	  ,bindAction: '#uploadBtn'
	  ,done: function(res){
		  handleResult(res);
	  }
	});
	
	
	$('#uploadBtnParent').click(function() {
		if(checkJarFilePath()) {
			$("#uploadBtn").click();
		}
	});
	
	$('#resetBtnId').click(function() {
		$('#mavenInfo').val('');
		clearInfo();
	});
	
	var updateInfo = function(data) {
		$("#groupId-id").html(data.groupId);
        $("#artifactId-id").html(data.artifactId);
        $("#version-id").html(data.version);
        $("#mavenCommandId").val(data.command);
	}
	
	var handleResult = function(res) {
		if(res.code == 0) {
            updateInfo(res.data);
            layer.tips('生成成功', '#mavenCommandId', {
               tips: [1, '#009688'],
               time: 1000
            });
        } else {
            layer.msg(res.msg, {icon: 5});
        }
	}
	
	var checkJarFilePath = function() {
		if($('#jarFilePath').val().trim() == '') {
			layer.tips('必填项不能为空', '#jarFilePath', {
			  tips: [1, '#FF5722'],
			  time: 2000
			});
			return false;
		}
		return true;
	}
	
	var clearInfo = function() {
		$("#mavenCommandId").val('');
        $("#groupId-id").empty();
        $("#artifactId-id").empty();
        $("#version-id").empty();
	}
	  
	form.on('submit(submitFilter)', function(data){
		clearInfo();
		
		if(!checkJarFilePath()) {
			return false;
		} else {
			data.field.jarFilePath = $('#jarFilePath').val().trim();
		}
		
		var index =layer.load(2, { shade: [0.1,'#fff'] });
		$.ajax({
			url:'./generate',
			type:'post',
			dataType:'json',
			contentType:"application/json",
			async:true,
			cache:false,
			data:JSON.stringify(data.field),
		    
		    success:function(res) {
		    	layer.close(index);
		    	handleResult(res);
		    },
		    error:function(res) {
		    	layer.close(index);
		    	layer.msg('网络异常', {icon: 5});
		    }
		});
		
		return false;
		
		});
	});
</script>
</body>
</html>